/**
 * 页面底部组件
 * 包含链接、联系信息、版权信息等
 */

import { sections } from "../../data/homeData";

interface FooterProps {
    onScrollToSection: (sectionId: string) => void;
}

export default function Footer({ onScrollToSection }: FooterProps) {
    return (
        <footer className="bg-gray-900 text-white py-12">
            <div className="max-w-7xl mx-auto px-6">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-10">
                    {/* Logo和描述 */}
                    <div>
                        <div className="flex items-center space-x-2 mb-6">
                            <div className="w-10 h-10 rounded-lg bg-indigo-600 flex items-center justify-center">
                                <i className="fa-solid fa-brain text-white"></i>
                            </div>
                            <span className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-400">
                                AI简历解析
                            </span>
                        </div>
                        <p className="text-sm text-gray-400">
                            基于大模型技术的新一代简历解析系统，实现高效、精准的人才筛选
                        </p>
                    </div>
                    
                    {/* 快速链接 */}
                    <div>
                        <h4 className="text-lg font-semibold mb-6">快速链接</h4>
                        <ul className="space-y-3">
                            {sections.slice(1, 6).map(section => (
                                <li key={section.id}>
                                    <button
                                        onClick={() => onScrollToSection(section.id)}
                                        className="text-sm text-gray-400 hover:text-indigo-400 transition-colors">
                                        {section.title}
                                    </button>
                                </li>
                            ))}
                        </ul>
                    </div>
                    
                    {/* 更多内容 */}
                    <div>
                        <h4 className="text-lg font-semibold mb-6">更多内容</h4>
                        <ul className="space-y-3">
                            {sections.slice(6).map(section => (
                                <li key={section.id}>
                                    <button
                                        onClick={() => onScrollToSection(section.id)}
                                        className="text-sm text-gray-400 hover:text-indigo-400 transition-colors">
                                        {section.title}
                                    </button>
                                </li>
                            ))}
                        </ul>
                    </div>
                    
                    {/* 联系信息 */}
                    <div>
                        <h4 className="text-lg font-semibold mb-6">联系我们</h4>
                        <ul className="space-y-3 text-sm text-gray-400">
                            <li className="flex items-center">
                                <i className="fa-solid fa-envelope mr-3 text-indigo-400"></i>
                                <span>contact@airesumeparser.com</span>
                            </li>
                            <li className="flex items-center">
                                <i className="fa-solid fa-phone mr-3 text-indigo-400"></i>
                                <span>+86 10 8888 8888</span>
                            </li>
                            <li className="flex items-center">
                                <i className="fa-solid fa-map-marker-alt mr-3 text-indigo-400"></i>
                                <span>北京市海淀区中关村科技园区</span>
                            </li>
                        </ul>
                    </div>
                </div>
                
                {/* 底部信息 */}
                <div className="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                    <p className="text-sm text-gray-500">© 2025 AI简历解析项目团队. 保留所有权利.</p>
                    <div className="flex space-x-6 mt-4 md:mt-0">
                        <a href="#" className="text-gray-500 hover:text-indigo-400 transition-colors">
                            <i className="fa-brands fa-weixin text-xl"></i>
                        </a>
                        <a href="#" className="text-gray-500 hover:text-indigo-400 transition-colors">
                            <i className="fa-brands fa-weibo text-xl"></i>
                        </a>
                        <a href="#" className="text-gray-500 hover:text-indigo-400 transition-colors">
                            <i className="fa-brands fa-linkedin text-xl"></i>
                        </a>
                        <a href="#" className="text-gray-500 hover:text-indigo-400 transition-colors">
                            <i className="fa-brands fa-github text-xl"></i>
                        </a>
                    </div>
                </div>
            </div>
        </footer>
    );
}